{% extends "eventos/base.html" %}

{% block title %} Eventos {% endblock %}

{% block extrahead %}
    {% load static %}
    {% get_static_prefix as STATIC_PREFIX %}
    
    <link rel="stylesheet" type="text/css" media="screen" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery-ui-1.8.16.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery.ui.jqgrid.css" />
    <script src="{{ STATIC_PREFIX }}js/jquery/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="{{ STATIC_PREFIX }}js/jquery/jqGrid/i18n/grid.locale-es.js" type="text/javascript"></script>
    <script src="{{ STATIC_PREFIX }}js/jquery/jqGrid/jquery.jqGrid.js" type="text/javascript"></script>
    <script src="{{ STATIC_PREFIX }}js/common.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $.getJSON("/eventos/{{ evento.pk }}/participantes/lista/cfg/", function(data){
                data['url'] = "/eventos/{{ evento.pk }}/participantes/lista/"
                data['sortname'] = 'apellidos',
                data["colNames"] = ['Id','Nombres', 'Apellidos'];
                $("#mygrid")
                .jqGrid(data)
                .navGrid('#pager', 
                    {add: false, edit: false, del: false, view: false},
                    {}, // edit options
                    {}, // add options
                    {}, // del options 
                    {multipleSearch:true, closeOnEscape:true, drag:true, closeAfterSearch: true}, // search options 
                    {} // view options 
                );
                jQuery("#mygrid").jqGrid('navGrid',"#pager").jqGrid('navButtonAdd',"#pager",{caption:"Editar", buttonicon:"ui-icon-newwin", onClickButton:(function(event) {llamar_formulario('/eventos/{{ evento.pk }}/participantes/editar/','')}), position:'first' ,title:"Editar"});
                jQuery("#mygrid").jqGrid('navGrid',"#pager").jqGrid('navButtonAdd',"#pager",{caption:"Ver", buttonicon:"ui-icon-newwin", onClickButton:(function(event) {llamar_formulario('/eventos/{{ evento.pk }}/participantes/ver/','')}), position:'first' ,title:"Ver"});
            });
        })
    </script> 
{% endblock %}

{% block breadcrumb %} <a href="/">Inicio</a> > <a href='/eventos/'>Eventos</a> > <a href='/eventos/ver/{{evento.pk}}/'>{{evento.nombre}} {{evento.edicion}}</a> > Participantes {% endblock %}

{% block content %}
<div class='buttons' align='right'>
    <input type='submit' value='Regresar' onclick="document.location = '../../';">
    <input type='submit' value='Agregar participante' onclick="document.location = '/eventos/{{ evento.pk }}/participantes/crear/';">
</div>

<div class="main">
    <div id="jqgrid">
        <table id="mygrid"></table>
        <div id="pager"></div>
    </div>
</div>

{% endblock content %}

<div class="module">
{% if atletas %}
    <table summary="Evetos disponibles en {{ fecha }}">
    <!-- <caption><a href="{{ app.app_url }}" class="section">{{ app.name }}</a></caption> -->
    {% for atleta in atletas %}
        <tr>
        <th scope="row">
        <a href="/eventos/{{ evento.pk }}/participantes/{{ atleta.id }}/">{{ atleta }}</a>
        </th>
        </tr>
    {% endfor %}
    </table>
{% else %}
    <p>No hay atleta participantes para este evento.</p>
{% endif %}
